<template>
    <div class="main">
        <div class="main-header" v-if="buttons.length">
            <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            >
        </div>
        <el-table
            ref="table"
            class="main-table"
            :data="recordsData"
            height="100%"
            border
            header-cell-class-name="main-table-header"
        >
            <el-table-column align="center" label="门店名" prop="store_name" />
            <el-table-column align="center" label="图片" prop="imgurl">
                <template slot-scope="{ row }">
                    <el-image
                        style="width:50px;height:50px;"
                        :src="row.imgurl"
                        fit="contain"
                        :preview-src-list="[row.imgurl]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column align="center" label="设备号" prop="devicekey" />
            <el-table-column align="center" label="体温" prop="temperature" />
            <el-table-column
                align="center"
                label="是否开门"
                width="100px"
                prop="openstate"
            >
                <template slot-scope="{ row }">
                    <i
                        class="el-icon-check"
                        style="color:#67C23A;"
                        v-if="row.openstate == 1"
                    ></i>
                    <i class="el-icon-close" style="color: #F56C6C;" v-else></i>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="是否佩戴口罩"
                prop="maskstatus"
                width="100px"
            >
                <template slot-scope="{ row }">
                    <i
                        class="el-icon-check"
                        style="color:#67C23A;"
                        v-if="row.maskstatus == 1"
                    ></i>
                    <i class="el-icon-close" style="color: #F56C6C;" v-else></i>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="是否匹配成功"
                prop="is_match"
                width="100px"
            >
                <template slot-scope="{ row }">
                    <i
                        class="el-icon-check"
                        style="color:#67C23A;"
                        v-if="row.is_match == 1"
                    ></i>
                    <i class="el-icon-close" style="color: #F56C6C;" v-else></i>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="100px"
                label="消息ID"
                prop="msg_id"
            />
            <el-table-column align="center" label="匹配会员名称" prop="name" />
            <el-table-column
                align="center"
                label="匹配会员等级"
                prop="memberLevelName"
            />
            <el-table-column align="center" label="匹配时间" prop="createtime">
                <template slot-scope="{ row }">
                    {{ row.createtime | formatDate }}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="main-pagination"
            :current-page.sync="page"
            :page-size="limit"
            :total="total"
            @current-change="onPageChange"
            layout="total,jumper,prev,pager,next"
        ></el-pagination>
        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            append-to-body
            width="800px"
        >
            <component
                :is="dialogView"
                @update="getRecordsData"
                @search="search"
                :selection="selection"
            ></component>
        </el-dialog>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";

export default {
    name: "view-open-door-records",
    data() {
        return {
            page: 1,
            limit: 20,
            total: 0,
            quick_search: "",
            recordsData: [],
            selection: [],
            dialogVisible: false,
            dialogTitle: "",
            dialogView: ""
        };
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    components: {
        Search: () => import("./search.vue")
    },
    mounted() {
        this.getRecordsData();
    },
    methods: {
        search(result) {
            this.page = 1;
            this.quick_search = result.quick_search;
            this.getRecordsData();
        },
        onSearch() {
            this.dialogTitle = "搜索";
            this.dialogView = "Search";
            this.dialogVisible = true;
        },
        onReset() {
            this.quick_search = "";
            this.page = 1;
            this.getRecordsData();
        },
        onPageChange(index) {
            this.page = index;
            this.getRecordsData();
        },
        async getRecordsData() {
            const data = await get({
                url: "/admin/robot.OpenDoor/index",
                loading: true,
                params: {
                    page: this.page,
                    limit: this.limit,
                    quick_search: this.quick_search
                }
            });
            this.recordsData = data.list;
            this.total = data.total;
        },
        tapButton(item) {
            if (item.path === "search") {
                this.onSearch();
            } else if (item.path === "refresh") {
                this.onReset();
            }
        }
    }
};
</script>